import React, { useEffect, useState } from 'react'
import Son from './components/Son'
export default function App() {
  let [count, setCount] = useState(100)
  let [msg, setMsg] = useState('hello')

  // // 1.1 组件挂载执行
  // useEffect(() => {
  //   console.log('App 组件挂载 componentDidMount')
  //   // 1.2 组件卸载执行
  //   return () => {
  //     console.log('App 组件卸载')
  //   }
  // }, [])

  // // 2. 组件更新执行
  // useEffect(() => {
  //   console.log('App 组件更新 componentDidUpdate')
  // })
  // useEffect(() => {
  //   console.log('count componentDidUpdate')
  // }, [count])

  // useEffect(() => {
  //   console.log('msg componentDidUpdate')
  // }, [msg])

  return (
    <div>
      <p>count: {count}</p>
      <button onClick={() => setCount(count + 1)}>点击 +1 </button>
      <p>msg:{msg}</p>
      <button
        onClick={() => {
          setMsg(msg + '!')
        }}
      >
        更新msg
      </button>
      <h1>Son组件</h1>
      <hr />
      {count % 2 === 0 && <Son count={count} />}
    </div>
  )
}
